{% extends "../public/basechild.html" %}

{% block title %} 机构列表 {% endblock title %}

{% block style%}
<link href="/static/admin/eleme/element.css" rel="stylesheet" />
<link href="/static/admin/eleme/element-extends.css" rel="stylesheet" />
{% endblock %}

{% block content %}
<section id="app" v-cloak>
	<el-row :gutter="20">
		<el-col :span="24">
			<div class="block mt mb">
				<el-button type="success" icon="el-icon-plus" @click="add">添加机构</el-button>
				<el-button type="primary" icon="el-icon-refresh" @click="refresh" class="fr">刷新列表</el-button>
			</div>
			<el-table :data="list" :stripe="true" border>
				<el-table-column prop="id" label="机构ID"></el-table-column>
				<el-table-column prop="dname" label="机构名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="orcode" label="机构代码"></el-table-column>
				<el-table-column prop="gnum" label="已开分店数量"></el-table-column>
				<el-table-column prop="begintime" label="成立日期" show-overflow-tooltip>
					<template scope="scope">
					{% raw %}
						{{ time(scope.row.begintime) }}
					{% endraw %}
					</template>
				</el-table-column>
				<el-table-column prop="endtime" label="截至日期" show-overflow-tooltip>
					<template scope="scope">
						{% raw %}
							{{ time(scope.row.endtime) }}
						{% endraw %}
					</template>
				</el-table-column>
				<el-table-column prop="addtime" label="添加日期" show-overflow-tooltip>
					<template scope="scope">
						{% raw %}
							{{ time(scope.row.addtime) }}
						{% endraw %}
					</template>
				</el-table-column>
				<el-table-column prop="aname" label="联系人姓名"></el-table-column>
				<el-table-column prop="phone" label="联系人电话"></el-table-column>
				<el-table-column prop="remarks" label="帐号描述" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="isdisable" label="机构状态">
					<template scope="scope">
						<el-tag v-if="!scope.row.isdisable" size="small">正常</el-tag>
						<el-tag type="danger" size="small" v-else>停用</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="140">
					<template scope="scope">
						<el-button-group v-if="!scope.row.isdisable">
							<el-tooltip content="编辑机构信息" placement="left" :open-delay="500">
								<el-button type="warning" icon="el-icon-edit" size="mini" plain @click="editor(scope.row.id)"></el-button>
							</el-tooltip>
							<el-tooltip content="修改机构联系人信息" placement="top" :open-delay="500">
								<el-button type="info" icon="el-icon-h-daifp" size="mini" plain @click="edituser(scope.row.id)"></el-button>
							</el-tooltip>
							<el-tooltip content="停用当前机构" placement="bottom" :open-delay="500">
								<el-button type="danger" icon="el-icon-h-jinyong" size="mini" plain @click="unstop(scope.row.id,1)"></el-button>
							</el-tooltip>
						</el-button-group>
						<el-tooltip content="重新打开当前机构" placement="left" :open-delay="500" v-else>
							<el-button type="primary" icon="el-icon-h-qiyong2" size="mini" plain @click="unstop(scope.row.id,0)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<div class="block center bg-light">
				<el-pagination
					@current-change="currpage"
					:page-size="limits"
					layout="prev, pager, next"
					:total="total">
				</el-pagination>
			</div>
		</el-col>
	</el-row>
</section>
{% endblock%} 

{% block script%}
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/layer/layer.js"></script>
<script type="text/javascript" src="/static/admin/js/h.js"></script>
<script type="text/javascript" src="/static/admin/eleme/vue.js"></script>
<script type="text/javascript" src="/static/admin/eleme/element.js"></script>
<script>
var vm = new Vue({
	el: '#app',
	data: {
		list: [],
		total: 0,
		pages: 1,
		limits: 15,
	},
	methods: {
		add: function(){
			H.ajaxiframe('/admin/organization/add',400, 540, '新增机构');
		},
		editor: function(id){
			H.ajaxiframe('/admin/organization/editshop?id='+id,400, 540, '修改机构信息');
		},
		edituser: function(id){
			H.ajaxiframe('/admin/organization/edituser?id='+id,400, 300, '修改联系人信息');
		},
		unstop: function(id, status){
			let that = this;
			let msg = '';
			if (status) msg = '确定关闭当前机构？';
			else msg = '确定重新打开当前机构？';

			layer.confirm(msg, function(){
				H.ajax('/admin/organization/unstop', {id: id, status: status}, 'post', function(res){
					layer.msg(res.data, {icon:1, time:2000});
					that.getList();
				})
			})
		},
		refresh: function(){
			window.location.reload();
		},
		currpage: function(val){
			this.pages = val;
			this.getList();
		},
		getList: function(){
			let that = this;
			H.ajax('/admin/organization/shoplist',{pages: this.pages, limits: this.limits}, 'post', function(data){
				that.list = data.data;
				that.total = data.count;
			})
		},
		time: function(unix){
			return H.times(unix);
		},
	},
	mounted: function(){
		this.getList()
	}
})

</script>
{% endblock %}